<template>
  <div class="preview-work">
    <a-drawer
      v-model:open="openDrawer"
      title="预览和设置"
      placement="right"
      :mask-closable="false"
    >
      <a-form
        :model="workInfo"
        :label-col="{ style: { width: '100px' } }"
        :rules="rules"
        ref="formRef"
      >
        <a-form-item label="预览二维码">
          <a-qrcode :value="qrcodeUrl" />
        </a-form-item>
        <a-form-item label="作品标题" name="title">
          <a-input
            placeholder="请输入作品名称"
            v-model:value="workInfo.title"
          />
        </a-form-item>
        <a-form-item label="作品描述" name="desc">
          <a-input placeholder="请输入作品描述" v-model:value="workInfo.desc" />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 24, offset: 4 }">
          <a-row>
            <a-col :span="8">
              <a-button
                type="primary"
                @click="publishHandle"
                :loading="publishBtnLoading"
                >发布</a-button
              >
            </a-col>
            <a-col :span="8">
              <a-button @click="savePreViweHandle" :loading="saveLoading"
                >保存</a-button
              >
            </a-col>
            <a-col :span="8">
              <a-button @click="cancelPreViewHandle">取消</a-button>
            </a-col>
          </a-row>
        </a-form-item>
      </a-form>
      <template #footer>
        <div class="preview-container" v-if="openDrawer">
          <div class="preview-inner">
            <div class="preview-title">{{ workInfo.title }}</div>
            <div class="iframe-container">
              <iframe
                :src="qrcodeUrl"
                width="375"
                class="iframe-placeholder"
                :height="iframeHeight"
                frameborder="0"
              />
            </div>
            <div class="iframe-tip">仅供预览，请发布后在正式使用</div>
          </div>
        </div>
      </template>
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
import { getWorkDtailAPI } from '@/request/modules/work'
import type { IWorkDetail } from '@/request/types/workType'
import { computed, ref, watch } from 'vue'
import useEditorStore from '@/store/modules/editorStore'
import useSaveWork from '@/hooks/useSaveWork'
import { message } from 'ant-design-vue'
interface IPreviewWorkProps {
  workId: string
}
interface IWorkInfo {
  title: string
  desc: string
}
const { changePageData, pageData } = useEditorStore()
const { saveWork } = useSaveWork(false)
const openDrawer = defineModel()
const publishBtnLoading = defineModel('publishBtnLoading')
const props = defineProps<IPreviewWorkProps>()
const emits = defineEmits(['publish'])
const formRef = ref()
const saveLoading = ref(false)
const iframeHeight = computed(() => {
  return pageData.props.height || '560px'
})
const workInfo = ref<IWorkInfo>({
  title: '',
  desc: '',
})
const rules = {
  title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  desc: [{ required: true, message: '请输入描述', trigger: 'blur' }],
}
const qrcodeUrl = computed(() => {
  const { uuid, id } = workDetail.value
  return `${import.meta.env.VITE_API_URL}/utile/page/${id}-${uuid}`
})
const workDetail = ref<Partial<IWorkDetail>>({})
const getWorkinfo = async () => {
  const result = await getWorkDtailAPI(props.workId)
  workDetail.value = result.data?.data || {}
  const { title, desc } = result.data?.data || {}
  workInfo.value = {
    title,
    desc,
  }
}
const cancelPreViewHandle = () => {
  openDrawer.value = false
  formRef.value.resetFields()
}
const savePreViweHandle = async () => {
  saveLoading.value = true
  const { title, desc } = workInfo.value
  changePageData({ key: 'title', value: title }, true)
  changePageData({ key: 'desc', value: desc }, true)
  await saveWork()
  message.success('保存成功')
  openDrawer.value = false
  saveLoading.value = false
}
const publishHandle = () => {
  publishBtnLoading.value = true
  const { title, desc } = workInfo.value
  changePageData({ key: 'title', value: title }, true)
  changePageData({ key: 'desc', value: desc }, true)
  emits('publish')
}
watch(
  openDrawer,
  (newVal) => {
    if (newVal) {
      console.log(234234)

      getWorkinfo()
    }
  },
  {
    immediate: true,
  }
)
</script>

<style scoped lang="scss">
.preview-container {
  position: fixed;
  width: calc(100% - 400px);
  height: 100vh;
  background: transparent;
  top: 0;
  left: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  .preview-inner {
    width: 430px;
    height: 870px;
    padding: 60px 28px;
    position: relative;
    background: url('http://lego-express.oss-cn-shanghai.aliyuncs.com/express-test/982bd9ca-394a-40fd-b64b-35d318f4e921/phone-back.png')
      no-repeat;
    background-size: cover;
    .preview-title {
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-weight: 700;
      color: black;
      opacity: 0.65;
    }
    .iframe-container {
      width: 100%;
      height: 706px;
      overflow-y: auto;
      overflow-x: hidden;
      &::-webkit-scrollbar {
        width: 1px;
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #dcdcdc;
        border-radius: 5px;
      }
      &::-webkit-scrollbar-track {
        background-color: #ffffff;
        border-radius: 5px;
      }
      .iframe-placeholder {
        background: url('../assets/loading.svg') 50% 50% no-repeat;
        background-size: 50px;
      }
    }
    .iframe-tip {
      position: absolute;
      left: 50%;
      top: 105px;
      transform: translateX(-50%);
      width: 375px;
      height: 40px;
      background-color: red;
      z-index: 9999;
      line-height: 40px;
      font-size: 20px;
      font-weight: 700;
      text-align: center;
    }
  }
}
</style>
